<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            border: 1px solid #ccc;
            border-right: none;
            border-bottom: none;
        }
        ul{
            list-style: none;
        }
        ul li{
            float: left;
            border: 1px solid #ccc;
            border-left: none;
            border-top: none;
        }
        #container>div{
            float: right;
        }
    </style>
</head>
<body>
    <div id="container">
        <ul id="uls"></ul>
        <button>开始游戏</button>
        <div>积分：0</div>
    </div>
    <script>
        var container=$id("container"),
            uls=$id("uls"),
            datas={size:20,x:10,y:10};
        function init(){//初始化游戏
            createMap();
        }
        function createMap(){//创建地图
            container.style.width=(datas.size+1)*datas.x+"px";
            container.style.height=(datas.size+1)*datas.y+"px";
            for(var i=0;i<datas.x*datas.y;i++){
                var oDiv=document.createElement("li");
                oDiv.style.width=oDiv.style.height=datas.size+"px";
                uls.appendChild(oDiv);
            }
        }
        // 获取集合元素li
        function $tagName(parent,child){
            return parent.getElementsByTagName(child);
        }
        //构造获取id的函数 
        function $id(id){
            return document.getElementById(id);
        }
        init();
    </script>
</body>
</html>